<script setup>
// 在 Vue3 CompositionAPI 中
// 1. 获取路由对象 router 使用 useRouter
//    const router = useRouter()
// 2. 获取路由参数 route 使用 useRoute
//    const route = useRoute()

import { useRouter, useRoute } from 'vue-router'

// import { useCountStore } from '@/stores/modules/counter'
// import { useUserStore } from '@/stores/modules/user'
import { useCountStore, useUserStore } from './stores'   // 把上面的两句话合成一句，配置 store/index.js

const router = useRouter()
const route = useRoute()

const goList = () => {
  // 在 setup 代码中没有 this
  // setup 在 beforeCreate 之前执行
  // this.$router.push('/list')
  console.log(router, route)
  router.push('/list')
}


// 用户模块的 pinia
// 导入用户模块
const userStore = useUserStore()

// 计数模块
const countStore = useCountStore()
</script>

<template>
  <div>
    <hr>
    <router-view></router-view>



    <hr>
    <hr>
    <hr>
    Vue
    <!-- element-ui 的按需导入，组件导入不需要 import 直接用 -->
    <!-- 默认 components 下的组件也会自动注册 -->
    <test-demo></test-demo>
    <el-button @click="$router.push('/home')">跳首页</el-button>
    <el-button @click="goList">跳列表页</el-button>

    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>

    <p>{{ userStore.token }}</p>
    <el-button @click="userStore.setToken('fdjkasfjdkjsadkfh')">登录</el-button>
    <el-button @click="userStore.removeToken">退出</el-button>

    <hr>
    {{ countStore.count }}
    <el-button @click="countStore.add(2)">+2</el-button>
  </div>
</template>

<style scoped>

</style>